<template>
	<!-- 商品列表，两栏制 -->
	<view class="goods-list">
		<navigator class="goods-item" v-for="item in goodsList" :key="item.id" :url="`/pages/goods/goods?id=${item.id}`">
			<image class="image" mode="aspectFill" :src="item.picture"></image>
			<view class="name"> {{ item.name }} </view>
			<view class="price">
				<text class="currency">¥</text>
				<text>{{ item.price }}</text>
			</view>
		</navigator>
	</view>
	<!-- 加载提示文字 -->
	<view class="loading-text">
		{{ finish ? '没有更多数据~' : '正在加载...' }}
	</view>
</template>

<script setup lang="ts">
	import { GoodsItem } from '../types/global';


	defineProps<{
		goodsList : GoodsItem[] | any,
		finish : boolean
	}>()
</script>

<style lang="scss" scoped>
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-self: center;
		justify-content: space-evenly;

		.goods-item {
			width: 345rpx;
			padding: 24rpx 20rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #fff;
		}

		.image {
			width: 300rpx;
			height: 300rpx;
		}

		.name {
			height: 75rpx;
			margin: 10rpx 0;
			font-size: 26rpx;
			color: #262626;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.price {
			line-height: 1;
			padding-top: 4rpx;
			color: #cf4444;
			font-size: 26rpx;
		}

		.currency {
			font-size: 80%;
		}
	}

	.loading-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0;
	}
</style>